<template>
    <div class="result-box">
        <div class="search-key">
            <input type="text" v-model="keyword" placeholder="在此输入">
        </div>
        <div class="filters">
            <a href="javascript:" v-for="(f,i) in filters" :key="i+Math.random()">{{f.type}}:{{f.val}} <a-icon type="close" @click="deleteFilter(i,f.type)" /></a>
        </div>
        <div class="result-info">
            <span>共匹配到<b>1212</b>条数据</span>
            <div class="sort">
                <span @click="sort('sortKey1')">提名 <em>{{sortKey1?'↑':'↓'}}</em></span>
                <span @click="sort('sortKey2')">责任者 <em>{{sortKey2?'↑':'↓'}}</em></span>
            </div>
        </div>
        <div class="result-list">
            <ul>
                <li v-for="(l,i) in dataList" :key="i">
                    <router-link to="/detail/1"><img src="demo.png" alt=""></router-link>
                    <div class="info">
                        <router-link to="/detail/1" tag="h4" v-html="highLight(l.title)"></router-link>
                        <p><span>责任者：</span>{{l.zrz}}</p>
                        <p><span>出版：</span><span style="color: #aaa" v-html="highLight(l.cb)"></span></p>
                        <p><span>尺寸：</span>{{l.cc}}</p>
                        <p><span>页码：</span>{{l.ym}}</p>
                    </div>
                    <router-link to="/moreVersion/1">更多信息 ></router-link>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                sortKey1:false,
                sortKey2:true,
                keyword:'',
                filters:[],
                dataList:[
                    {
                        title:'标题家具偶就碰到瓶颈破介绍的品牌破灭时屏幕',
                        zrz:'责任者名称啊哈哈哈',
                        cb:'出版啊啊啊',
                        cc:'尺寸啊啊',
                        ym:'11'
                    },
                    {
                        title:'标题家具偶就碰到瓶颈破介绍的品牌破灭时屏幕',
                        zrz:'责任者名称啊哈哈哈',
                        cb:'出版啊啊啊',
                        cc:'尺寸啊啊',
                        ym:'11'
                    },
                    {
                        title:'标题家具偶就碰到瓶颈破介绍的品牌破灭时屏幕',
                        zrz:'责任者名称啊哈哈哈',
                        cb:'出版啊啊啊',
                        cc:'尺寸啊啊',
                        ym:'11'
                    }
                ]
            }
        },
        methods:{
            sort(key){
                this[key]=!this[key]
            },
            highLight(text){
                return text.split(this.keyword).join('<b style="color: red">'+this.keyword+'</b>')
            },
            addFilter(type,val){
                this.filters.push({type,val})
            },
            deleteFilter(index,type){
                this.filters.splice(index,1)
                this.$emit('removeFilter',index,type)
            }
        }
    }
</script>

<style lang="less" scoped>
    .result-box{
        font-size: 1rem;
    }
    .filters{
        margin: 20px 0 0 0;
        a{
            display: inline-block;
            border: 1px solid #126e82;
            height: 30px;
            vertical-align: top;
            box-sizing: border-box;
            line-height: 28px;
            border-radius: 15px;
            padding: 0 15px;
            margin-right: 10px;
            margin-bottom: 10px;
            color: #666;
        }
    }
    .result-list{
        margin-top: 10px;
        padding: 0 20px;
        li{
            list-style: none;
            display: flex;
            justify-content: space-between;
            padding: 20px 0;
            border-bottom: 1px solid #ddd;
            img{
                width: 100px;
                height: auto;
                cursor: pointer;
                margin-right: 20px;
            }
            a{
                align-self: flex-end;
                color: #aaa;
            }
            .info{
                flex-grow: 1;
                margin-right: 20px;
                h4{
                    cursor: pointer;
                    font-size: 1.2rem;
                    color: #126e82;
                    line-height: 1.5;
                    margin-bottom: 10px;
                    font-weight: bold;
                }
                p{
                    margin: 0;
                    padding: 0;
                    line-height: 1.7;
                    color: #aaa;
                    span{
                        color: #666;
                    }
                }
            }
        }
    }
    .result-info{
        border: 1px solid #ddd;
        display: flex;
        border-left: none;
        border-right: none;
        height: 32px;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
        padding: 0 10px;
        .sort{
            span{
                color: #126e82;
                margin-left: 20px;
                cursor: pointer;
                em{
                    font-size: 18px;
                    font-style: normal;
                }
            }
        }
        span{
            line-height: 32px;
            color: #bbb;
            b{
                color: #126e82;
                font-size: 1.4rem;
                padding: 0 5px;
            }
        }
    }
    .search-key{
        input{
            width: 100%;
            height: 32px;
            border: 1px solid #126e82;
            border-radius: 16px;
            font-size: 1.1rem;
            display: block;
            box-sizing: border-box;
            padding-left: 10px;
        }
    }
</style>
